.dx-tagbox {
    .dx-texteditor-input {
        width: auto;
    }

    &.dx-tagbox-default-template {
        &.dx-tagbox-only-select {
            .dx-texteditor-input {
                .hide-input-cursor(); //T278002
                min-width: 0;
                width: 0.1px; //T393423, T437866
                padding-left: 0;
                padding-right: 0;
                margin-left: 0;
                margin-right: 0;
            }
        }
    }

    &.dx-state-disabled {
        .dx-texteditor-input {
            background: none;
        }

        .dx-tag-content {
            cursor: default;
        }
    }
}


.dx-tag {
    max-width: calc(100% - 1px);
    display: inline-block;
}

.dx-tag-container {
    padding: 0;
    padding-right: 4px;
    outline: none;

    .dx-texteditor-container& {
        white-space: normal;
    }

    .dx-tagbox-single-line & {
        overflow-x: hidden;
        white-space: nowrap;
        position: static;
    }
}

.dx-tag-content {
    position: relative;
    display: inline-block;
    margin: 4px 0 0 4px;
    min-width: 30px;
    text-align: center;
    cursor: pointer;

    &:before{
        content: ".";
        color: transparent;
        display: inline-block;
        width: 0;
    }
}

.dx-tag-remove-button {
    position: absolute;
    top: 0;
    right: 0;

    &:before, &:after {
        position: absolute;
        top: 50%;
        content: "";
        .rotate(45deg);
    }
}

.dx-rtl .dx-tagbox,
.dx-tagbox.dx-rtl {
    .dx-tag-content {
        margin-left: 0;
        margin-right: 4px;
    }

    .dx-tag-remove-button {
        right: auto;
        left: 0;
    }

    .dx-tag-container {
        padding-left: 4px;
        padding-right: 0;
    }
}
